<template>

<div class="container">
    <div class="login">
        <div class="login-pic">1</div>
        <div class="login-form">
            <img class="logo-title-img" src="/title.png" alt="" />
            <input />
            <input type="password"/>
        </div>
    </div>
</div>
</template>

<script lang="ts" setup>
</script>


<style scoped>

.container {
    width: 100%;
    height: 100vh;
    background-image: url("/login_bg.png");
    background-size: cover;
    overflow: hidden;
}
.login {
    width: 60%;
    height: 60%;
    /* margin-left: 20%; */
    margin: 10% auto;
    background-color: red;
    display: flex;
}
.login-pic {
    width: 50%;
    background-image: url("/left.png");
    background-size: cover;
    overflow: hidden;
}
.login-form {
    width: 50%;
    background-image: url("/right.png");
    background-size: cover;
    overflow: hidden;
    border-radius:0 20px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;

}
.logo-title-img {
    height: 96px;
}
</style>